<template>
  <!-- 公告管理 -->
  <div class="notice-config">
    <h5>公告管理</h5>
    <div class="serch-box">
      <div class="serch-list">
        <el-form :model="serchForm" :inline="true" :label-position="serchLabelPosition" label-width="100px">
          <el-form-item label="公告标题">
            <el-input v-model.trim="serchForm.noticeTitle"></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <el-input v-model.trim="serchForm.sentDate"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="serchForm.status" class="m-2" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="serch-oprate">
        <el-button type="primary" @click="addNotice">新建</el-button>
      </div>
    </div>
    <resize-table :showPagination="true" :data="tableData" :pagingData="pagingData" :headers="headers">
      <template #name="{ scope }">
        {{ scope.row.name }}
      </template>
      <template #oprate>
        <el-button type="text" @click="editNotice">编辑</el-button>
        <el-button type="text" @click="noticeScope">公示范围</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </resize-table>
    <resize-drawer
      :title="noticeTitle"
      @onCloseDraw="closeDraw"
      @onCancelFun="cancelFun"
      :isShowMoreBtn="true"
      :drawer="drawerShow"
      :size="720"
    >
      <template #column v-if="drawerType == 'notice'">
        <el-form v-model="noticeForm" :rules="noticeRules" label-width="100px">
          <el-form-item label="公告标题" prop="noticeTitle">
            <el-input v-model.trim="noticeForm.noticeTitle"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model.trim="noticeForm.author"></el-input>
          </el-form-item>
          <el-form-item label="公告内容" prop="noticeContent"> 内容 </el-form-item>
          <el-form-item label="公告附件">
            <el-upload
              v-model="fileList"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <el-button type="primary">上传附件</el-button>
              <template #tip>
                <div class="el-upload__tip">支持图片、视频、文件等通用格式，大小不得超过50M</div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="公示期">
            <el-row>
              <el-col :span="noticeForm.noticePeriod == 5 ? 18 : 24">
                <el-radio-group v-model="noticeForm.noticePeriod">
                  <el-radio :label="1">一天</el-radio>
                  <el-radio :label="2">三天</el-radio>
                  <el-radio :label="3">一周</el-radio>
                  <el-radio :label="4">两周</el-radio>
                  <el-radio :label="5">自定义时间</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="6" v-if="noticeForm.noticePeriod == 5">
                <el-input v-model.trim="noticeForm.noticePeriodTime">
                  <template #append>天</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="公示级别">
            <el-radio-group v-model="noticeForm.noticeLevel">
              <el-radio :label="1">普通</el-radio>
              <el-radio :label="2">重要</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公示范围">
            <el-radio-group v-model="noticeForm.noticeScope">
              <el-radio :label="1">按员工</el-radio>
              <el-radio :label="2">按服务组</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发送时间">
            <el-row>
              <el-col :span="noticeForm.sendTime === 2 ? 12 : 24">
                <el-radio-group v-model="noticeForm.sendTime">
                  <el-radio :label="1">立即发布</el-radio>
                  <el-radio :label="2">预约发布</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="12" v-if="noticeForm.sendTime === 2">
                <div class="block">
                  <el-date-picker
                    v-model="noticeForm.sendTimeOrderTime"
                    type="date"
                    placeholder="年月日"
                    :disabled-date="disabledDate"
                    :size="size"
                  />
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </template>
      <template #column v-else>
        <el-table :data="noticeScopeTableData" style="width: 100%">
          <el-table-column prop="staffNum" label="工号" />
          <el-table-column prop="staff" label="员工" />
          <el-table-column prop="readStatus" label="阅读状态" />
        </el-table>
      </template>
    </resize-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import ResizeTable from '@common/components/resize-table/index.vue'
import ResizeDrawer from '@common/components/resize-drawer/index.vue'
import type { FormRules, UploadProps } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  name: 'noticeConfig',
  components: {
    ResizeTable,
    ResizeDrawer
  },
  // ----------------生命周期-----------------------
  setup() {
    const state = reactive({
      drawerShow: false, // 抽屉开关
      noticeTitle: '新建公告', // 公告标题
      serchLabelPosition: 'top', // label方向
      statusList: [
        {
          // 状态列表
          label: '已发布',
          value: '1'
        }
      ],
      // 表格数据
      tableData: [
        {
          noticeTitle: '测试标题',
          releasePerson: '产品',
          releaseTime: '2022-07-21',
          sendNum: 10,
          readingNum: 20,
          readingRate: '10%',
          status: '已发布'
        }
      ],
      // 表头数据
      headers: [
        { label: '公告标题', prop: 'noticeTitle', show: true },
        { label: '发布人', prop: 'releasePerson', width: 150, show: true },
        { label: '发布时间', prop: 'releaseTime', width: 150, show: true },
        { label: '发送人数', prop: 'sendNum', show: true },
        { label: '阅读人数', prop: 'readingNum', show: true },
        { label: '阅读率', prop: 'readingRate', show: true },
        { label: '状态', prop: 'status', show: true },
        { label: '操作', prop: 'oprate', show: true }
      ],
      // 分页数据
      pagingData: { page: 1, total: 200, limit: 10 },
      drawerType: 'notice', // 抽屉类型
      // 公示范围表格数据
      noticeScopeTableData: [
        {
          staffNum: 1,
          staff: 'Tom',
          readStatus: '已阅读'
        }
      ]
    })

    // 公告表单
    const noticeForm = reactive({
      noticeTitle: '',
      author: '',
      noticeContent: '',
      noticePsd: '',
      noticePeriod: 3,
      noticePeriodTime: '',
      noticeLevel: 1,
      noticeScope: 1,
      sendTime: 1,
      sendTimeOrderTime: ''
    })

    // 搜索表单
    const serchForm = reactive({
      noticeTitle: '',
      sendDate: '',
      status: ''
    })

    // 公告表单规则
    const noticeRules = reactive<FormRules>({
      noticeTitle: [{ required: true, message: '请输入公告标题', trigger: 'blur' }]
    })

    // ================================== 事件方法 =====================================

    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now()
    }

    // 新建公告
    const addNotice = () => {
      state.noticeTitle = '新建公告'
      state.drawerShow = true
      state.drawerType = 'notice'
    }

    // 编辑公告
    const editNotice = () => {
      state.noticeTitle = '编辑公告'
      state.drawerShow = true
      state.drawerType = 'notice'
    }

    // 关闭抽屉
    const closeDraw = () => {
      state.drawerShow = false
    }

    // 关闭抽屉
    const cancelFun = () => {
      state.drawerShow = false
    }

    // 公示范围
    const noticeScope = () => {
      state.drawerType = 'noticeScope'
      state.noticeTitle = '公示范围'
      state.drawerShow = true
    }

    // 上传附件
    const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log(file, uploadFiles)
    }

    const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
      console.log(uploadFile)
    }

    const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
      ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
        } totally`
      )
    }

    const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
      return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
        () => true,
        () => false
      )
    }

    return {
      addNotice,
      editNotice,
      closeDraw,
      cancelFun,
      ...toRefs(state),
      noticeForm,
      noticeRules,
      disabledDate,
      handleRemove,
      handlePreview,
      handleExceed,
      beforeRemove,
      serchForm,
      noticeScope
    }
  }
})
</script>

<style lang="stylus" scoped>
.notice-config
    padding 0 20px
    .serch-box
        width 100%
        height 100%
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #ecf0f3
        .serch-list
            display flex
        .serch-oprate
            display flex
    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }
    .demo-date-picker .block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }
    .demo-date-picker .block:last-child {
        border-right: none;
    }
    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>
